//获取当前屏幕的尺寸，并设置html的font-size大小
var rSize;

function changeRem() {
    var width = document.body.clientWidth;
    var rate = width / 360;
    rSize = 20 * rate;
    rSize = Math.round(rSize);
    var root = document.getElementsByTagName("html");
    root[0].style.fontSize = rSize + "px";
}

//点击顶部导航栏的不同按钮显示不同的弹窗信息
var ykItems = document.getElementsByClassName("yk-items");
ykItems[0].addEventListener("touchstart", showInfo);
ykItems[1].addEventListener("touchstart", showInfo);
ykItems[2].addEventListener("touchstart", showInfo);
ykItems[3].addEventListener("touchstart", showInfo);

function showInfo(e) {
    var which = this.id;
    var controlModule;
    var style;
    switch (which) {
        case "yk-items-channel":
            resumeStyle(0);
            controlModule = document.getElementById("channelList");
            style = window.getComputedStyle(controlModule);
            if (style.display == "none") {
                this.className = "yk-items yk-items--special yk-items--change";
                controlModule.style.display = "block";
            } else {
                this.className = "yk-items yk-items--special";
                controlModule.style.display = "none";
            }
            break;
        case "yk-items-search":
            resumeStyle(1);
            controlModule = document.getElementById("search_input");
            var parent = controlModule.parentNode.parentNode;
            if (parent.className == "header__search") {
                this.className = "yk-items yk-items--change";
                parent.className = "header__search header__search--change";
                controlModule.focus();
                e.preventDefault();
            } else {
                this.className = "yk-items";
                parent.className = "header__search";
                controlModule.blur();
                e.preventDefault();
            }
            break;
        case "yk-items-log":
            resumeStyle(2);
            controlModule = document.getElementById("userLog");
            style = window.getComputedStyle(controlModule);
            if (style.display == "none") {
                this.className = "yk-items yk-items--change";
                controlModule.style.display = "block";
            }
            break;
        case "yk-items-record":
            resumeStyle(3);
            controlModule = document.getElementById("userRecord");
            style = window.getComputedStyle(controlModule);
            if (style.display == "none") {
                this.className = "yk-items yk-items--change";
                controlModule.style.display = "block";
            } else {
                this.className = "yk-items";
                if (userRecordList.style.transform != undefined) {
                    userRecordList.style.transform = "translate(0px, 0px) scale(1) translateZ(0)";
                } else if (userRecordList.style.WebkitTransform != undefined) {
                    userRecordList.style.WebkitTransform = "translate(0px, 0px) scale(1) translateZ(0)";
                }
                controlModule.style.display = "none";
                flag = 0;
            }
    }
}

//恢复同级导航栏中其他按钮的默认样式
function resumeStyle(i) {
    var controlModule;
    var style;
    for (var x = 0; x < 4; x++) {
        if (x == i) {
            continue;
        }
        if (x == 0) {
            ykItems[x].className = "yk-items yk-items--special";
            controlModule = document.getElementById("channelList");
            controlModule.style.display = "none";
        } else if (x == 1) {
            ykItems[x].className = "yk-items";
            controlModule = document.getElementById("search_input");
            var parent = controlModule.parentNode.parentNode;
            parent.className = "header__search";
            controlModule.blur();
        } else if (x == 2) {
            ykItems[x].className = "yk-items";
            controlModule = document.getElementById("userLog");
            controlModule.style.display = "none";
        } else if (x == 3) {
            ykItems[x].className = "yk-items";
            controlModule = document.getElementById("userRecord");
            if (userRecordList.style.transform != undefined) {
                userRecordList.style.transform = "translate(0px, 0px) scale(1) translateZ(0)";
            } else if (userRecordList.style.WebkitTransform != undefined) {
                userRecordList.style.WebkitTransform = "translate(0px, 0px) scale(1) translateZ(0)";
            }
            controlModule.style.display = "none";
            flag = 0;
        }
    }
}

//关闭登录窗口
var closeLog = document.getElementById("closeLog");
closeLog.addEventListener("touchstart", hideLog);

function hideLog() {
    var logPanel = document.getElementById("userLog");
    logPanel.style.display = "none";
    ykItems[2].className = "yk-items";
}

//获取滚动条距离页面顶部的距离
function getTop() {
    var distance = document.body.scrollTop;
    return distance;
}

//显示返回到顶部的button
window.onscroll = showUp;

function showUp() {
    var distance = getTop();
    var upIcon = document.getElementById("up-icon");
    if (distance > 20 * rSize) {
        upIcon.style.display = "block";
    } else {
        upIcon.style.display = "none";
    }
    showModuleTitle(distance);
}

//返回到页面顶部
document.getElementById("up-icon").addEventListener("touchstart", goTop);

function goTop(e) {
    document.getElementsByTagName("body")[0].scrollTop = 0;
    this.style.display = "none";
    e.preventDefault();
}

//显示每个模块的标题
function showModuleTitle(distance) {
    var module = document.getElementsByClassName("list-title");
    var moduleWrap = document.getElementsByClassName("list-title-wrap");
    var height = moduleWrap[0].getBoundingClientRect().top + window.pageYOffset;
    for (var i = 0; i < 12; i++) {
        var height = moduleWrap[i].getBoundingClientRect().top + window.pageYOffset;
        if (distance > height) {
            module[i].className = "list-title fix-list-title";
            if (i > 0) {
                module[i - 1].className = "list-title";
            }
        } else {
            module[i].className = "list-title";
        }
    }
}

//滑动导航条效果
var navSlide = document.getElementById("nav-slide");
navSlide.addEventListener("touchstart", getStart);
navSlide.addEventListener("touchmove", function(e) {
    getMove(this, e, "slide-list");
});
navSlide.addEventListener("touchend", function(e) {
    adjustMove(this, e, -56.6 * rSize);
});

//获取初始坐标
var startX;

function getStart(e) {
    startX = e.targetTouches[0].pageX;
    e.preventDefault();
}

//导航条跟随移动
var moveX = 0;
var backup;
var flag = 0;

function getMove(obj, e, myClass) {
    var endX = e.targetTouches[0].pageX;
    backup = moveX;
    moveX += endX - startX;
    startX = endX;
    obj.className = myClass;
    startMove(obj, moveX);
    e.preventDefault();
}

//调整移动距离
function adjustMove(obj, e, limit) {
    var temp = moveX + 20 * (moveX - backup);
    startMove(obj, temp, 0.4);
    moveX = temp;
    if (moveX <= limit) {
        startMove(obj, limit, 0.5);
        moveX = limit;
    } else if (moveX >= 0) {
        startMove(obj, 0, 0.5)
        moveX = 0;
    }
}

//改变移动的距离和移动时间
function startMove(obj, distance, time) {
    time = time || 0;
    if (obj.style.transform != undefined) {
        obj.style.transform = "translate(" + distance + "px, 0px) scale(1) translateZ(0)";
    } else if (obj.style.WebkitTransform != undefined) {
        obj.style.WebkitTransform = "translate(" + distance + "px, 0px) scale(1) translateZ(0)";
    }
    if (obj.style.transitionDuration != undefined) {
        obj.style.transitionDuration = time + "s";
    } else if (obj.style.WebkitTransitionDuration != undefined) {
        obj.style.WebkitTransitionDuration = time + "s";
    }
}

//用户记录滑动效果
var userRecordList = document.getElementById("userRecordList");
userRecordList.addEventListener("touchstart", getStart);
userRecordList.addEventListener("touchmove", function(e) {
    if (flag == 0) {
        moveX = 0;
    }
    getMove(this, e, "user-record-wrap slide-list");
    flag += 1;
});
userRecordList.addEventListener("touchend", function(e) {
    adjustMove(this, e, -23.5 * rSize);
});
